<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";

// 默认头像
const defaultAvatar =
  "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";

// 用户信息
const userInfo = reactive({
  avatarUrl: "",
  nickName: "",
  userId: "",
});

// 登录状态
const isLogin = ref(false);

// 页面加载时检查登录状态
onMounted(() => {
  checkLoginStatus();
});

// 检查登录状态
const checkLoginStatus = () => {
  try {
    const userStorage = uni.getStorageSync("userInfo");
    if (userStorage) {
      const user = JSON.parse(userStorage);
      userInfo.avatarUrl = user.avatarUrl;
      userInfo.nickName = user.nickName;
      userInfo.userId = user.userId;
      isLogin.value = true;
    }
  } catch (e) {
    console.error("获取登录信息失败", e);
  }
};

// 处理登录点击
const handleLogin = () => {
  if (!isLogin.value) {
    // 未登录状态下跳转到登录页
    uni.navigateTo({
      url: "/pages/login/index",
    });
  }
};

// 页面导航
const navigateTo = (url: string) => {
  uni.navigateTo({ url });
};
</script>
<template>
  <view class="user">
    <!-- 用户信息区域 -->
    <!-- <view class="user-header">
      <view class="user-info">
        <view class="avatar-wrapper" @click="handleLogin">
          <view class="avatar-border">
            <image
              class="avatar"
              :src="userInfo.avatarUrl || defaultAvatar"
            ></image>
          </view>
          <view class="login-status" v-if="!isLogin">
            <wd-icon name="arrow-right" size="32rpx" color="#fff"></wd-icon>
          </view>
        </view>
        <view class="user-details">
          <text class="username" v-if="isLogin">{{ userInfo.nickName }}</text>
          <text class="username" v-else @click="handleLogin">点击登录</text>
          <text class="user-id" v-if="isLogin"
            >ID:
            {{
              userInfo.userId || "U" + new Date().getTime().toString().slice(-8)
            }}</text
          >
        </view>
      </view>
    </view> -->

    <!-- 我的订单区域 -->
    <!-- <view class="card order-card">
      <view class="card-header">
        <text class="card-title">我的订单</text>
        <view class="view-all" @click="navigateTo('/pages/order/list')">
          <wd-icon name="arrow-right" size="32rpx" color="#999"></wd-icon>
        </view>
      </view>
    </view> -->

    <!-- 功能菜单区域 -->
    <!-- <view class="card menu-card">
      <view class="menu-item" @click="navigateTo('/pages/collect/index')">
        <view class="menu-icon">
          <wd-icon name="star-on" size="44rpx" color="#242424"></wd-icon>
        </view>
        <view class="menu-content">
          <text>我的收藏</text>
          <wd-icon name="arrow-right" size="32rpx" color="#999"></wd-icon>
        </view>
      </view>
      <view class="menu-item" @click="navigateTo('/pages/footprint/index')">
        <view class="menu-icon">
          <wd-icon name="history" size="44rpx" color="#242424"></wd-icon>
        </view>
        <view class="menu-content">
          <text>我的足迹</text>
          <wd-icon name="arrow-right" size="32rpx" color="#999"></wd-icon>
        </view>
      </view>
      <view class="menu-item" @click="navigateTo('/pages/contact/index')">
        <view class="menu-icon">
          <wd-icon name="phone" size="44rpx" color="#242424"></wd-icon>
        </view>
        <view class="menu-content">
          <text>联系我们</text>
          <wd-icon name="arrow-right" size="32rpx" color="#999"></wd-icon>
        </view>
      </view>
    </view> -->
    <view class="user-welcome">
      <view class="user-welcome-text">欢迎来到</view>
      <view class="user-welcome-text p-title">木木搭</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.user {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
  .user-welcome {
    height: 100vh;
    overflow: hidden;
    background-color: var(--wot-color-theme);
    display: flex;
    justify-content: center;
    .user-welcome-text {
      color: #fff;
      font-size: 46rpx;
      font-weight: bold;
      margin-top: 50%;
      &.p-title {
        color: #4E5A37
      }
    }
  }

  // 用户信息卡片
  .user-header {
    background-color: #fff;
    padding: 40rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    .user-info {
      display: flex;
      align-items: center;

      .avatar-wrapper {
        position: relative;
        margin-right: 30rpx;
        .avatar-border {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          background-color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .avatar {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: #ffffff;
        }

        .login-status {
          position: absolute;
          right: -6rpx;
          bottom: 0;
          width: 36rpx;
          height: 36rpx;
          background-color: var(--wot-color-theme, #242424);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .user-details {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .username {
          font-size: 36rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 12rpx;
        }

        .user-id {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }

  // 卡片样式
  .card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin: 30rpx 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // margin-bottom: 30rpx;

      .card-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }

      .view-all {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #999;
      }
    }
  }

  // 订单图标区域
  .order-icons {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;

    .order-icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20%;

      .icon-circle {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background-color: #f8f8f8;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16rpx;
      }

      text {
        font-size: 24rpx;
        color: #333;
      }
    }
  }

  // 功能菜单区域
  .menu-card {
    .menu-item {
      display: flex;
      align-items: center;
      padding: 30rpx 0;

      &:not(:last-child) {
        border-bottom: 2rpx solid #f5f5f5;
      }

      .menu-icon {
        margin-right: 30rpx;
      }

      .menu-content {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;

        text {
          font-size: 30rpx;
          color: #333;
        }
      }
    }
  }
}
</style>
